<!-- @format -->

<template>
  <view class="pageContainer">
    <view class="indexbg">
      <image :src="imgUrl + '/mine/myTopBgc.png'" mode=""></image>
    </view>
    <!-- 内容 -->
    <view class="index-conent"> 
      <!-- 上方logo -->
      <header-bar @getMarginTop="getMarginTop"></header-bar>
      <view class="last-content" :style="[{ top: top + 'px' }]">
        <!-- 按钮列表 -->
        <view class="link-list">
          <view
            class="link-item"
            v-for="(item, index) in linkList"
            :key="index"
            @click="toPage(item)">
            <view class="img-box">
              <image class="link-img" :src="item.img"></image>
            </view>
            <view class="link-name">
              {{ item.name }}
            </view>
          </view>
        </view>
        <!-- 轮播图 -->
        <view class="swiper-box">
          <swiper
            class="uni-swiper-wrapper"
            indicator-dots
            circular
            autoplay
            interval="3000">
            <swiper-item
              class="index-swiper-item"
              v-for="(item, index) in swiperList"
              :key="index">
              <image
                @tap="tabuLationBtn(item)"
                class="i-image"
                :src="item.carouselImg"></image>
            </swiper-item>
          </swiper>
        </view>

        <!-- 雪道图和雪圈 -->
        <view class="skiRoad-skiTubing">
          <view class="skiRoad" @click="toMapPage">
            <image :src="imgUrl + 'index/ski-map.png?id=1.4'"></image>
          </view>
		<view style="width: 335rpx;        height: 434rpx;">
		  <swiper
		  style="width: 335rpx;height: 434rpx;"
		    :indicator-dots="flag"
		    circular
		    autoplay
		
		    interval="3000">
		    <swiper-item
		      style="width: 335rpx;height: 434rpx;"
		      v-for="(item, index) in snowCircleData"
		      :key="index">
			  	<view style="border-bottom-right-radius: 20rpx;border-bottom-left-radius: 20rpx;padding: 5rpx 15rpx;background-color: rgba(255,255,255,0.6);color:#000;font-size: 24rpx;position: absolute;bottom: 2rpx;width: 100%;;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.title}}</view>
		      <image
		        @tap="newDetail(item.circleId)"
		        style="width: 335rpx;height: 390rpx;border-top-right-radius: 20rpx;border-top-left-radius: 20rpx"
		        :src="getImage(item.titleImg)" mode="aspectFill"></image>
			
		    </swiper-item>
		  </swiper>
		</view>
        </view>

        <!-- 行程单+攻略+直播 -->
        <view class="schedule-strategy-live">
          <view class="schedule" @click="toOrderSuccess">
            <image :src="imgUrl + 'index/scq.png'" mode=""></image>
          </view>
		  <!--
		   <view class="strategy">
		     <image :src="imgUrl + 'index/gl.png'" mode=""></image>
		   </view>
		   -->
          <view class="strategy" @click="toskiTubing">
            <image :src="imgUrl + 'index/gl.png'" mode=""></image>
          </view>
          <navigator
            url="/myPackageA/pages/tabuLation/index"
            hover-class="none">
            <view class="live">
              <image :src="imgUrl + 'index/zb.png'" mode=""></image>
            </view>
          </navigator>
        </view>
        <!-- 排行榜 -->
        <view class="rank" @tap="goPopular">
          <image :src="imgUrl + 'index/more.png'" mode=""></image>
        </view>
        <!-- 新手等五个菜单按钮 -->
        <view class="other-menu">
          <view
            class="menu-item"
            v-for="(item, index) in menuList"
            @click="toPage(item)"
            :key="index">
            <view class="menu-item-img">
              <image :src="item.url" mode=""></image>
            </view>
            <view class="menu-item-title">
              {{ item.name }}
            </view>
          </view>
        </view>
        <!-- 雪圈内容 -->
        <view class="ski-content">
          <view class="pubuBox">
            <view class="pubuItem">
              <view
                class="item-masonry"
                v-for="(item, index) in skiList"
                :key="index"
                @tap="newDetail(item.circleId)" >
                <image :src="getImage(item.titleImg)" mode="widthFix"></image>
                <view class="listtitle">
                  <!-- 这是没有高度的父盒子（下半部分） -->
                  <view class="ci-title">{{ item.title }}</view>
                  <view class="ci-user">
                    <view class="user-avatar">
                      <image :src="item.avatar" mode=""></image>
                    </view>
                    <view class="user-name">
                      {{ item.userName }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 空白，支撑起页面 -->
        <view class="white-box"></view>
      </view>
    </view>
    <zdy-tabbar :current-page="0"></zdy-tabbar>
  </view>
</template>

<script>
import headerBar from '@/components/header-bar/header-bar.vue'
export default {
  components: {
    headerBar,
  },
  data() {
    return {
		flag:false,
      imgUrl: this.$imgUrl,
      top: 0,
      linkList: [
        {
          img: this.$imgUrl + 'index/ymq.png',
          name: '一门清',
          toPageUrl: '/myPackageA/pages/easyClear/easyClear',
          isMainTab: false, //判断是否为底部导航页
        },
        {
          img: this.$imgUrl + 'index/ytd.png',
          name: '一图懂',
          toPageUrl: '/pages/map/map',
          isMainTab: true,
        },
        {
          img: this.$imgUrl + 'index/ydc.png',
          name: '一单成',
          toPageUrl: '/myPackageB/pages/orderSucceed/orderSucceed',
          isMainTab: false, //判断是否为底部导航页
        },

      ],
      swiperList: [],
      menuList: [
        {
          url: this.$imgUrl + 'index/xs.png',
          name: '新手',
          toPageUrl: '/myPackageA/pages/easyClear/easyClear?typeId=8',
        },
        {
          url: this.$imgUrl + 'index/yh.png',
          name: '优惠',
        },
        {
          url: this.$imgUrl + 'index/jl.png',
          name: '教学',
          toPageUrl: '/myPackageA/pages/easyClearOthers/easyClearOthers?type=5',
        },
        {
          url: this.$imgUrl + 'index/zhuangbei.png',
          name: '装备',
          toPageUrl: '/myPackageA/pages/easyClearOthers/easyClearOthers?type=6',
        },
        {
          url: this.$imgUrl + 'index/sy.png',
          name: '摄影',
          toPageUrl: '/myPackageA/pages/easyClearOthers/easyClearOthers?type=7',
        },
      ],
      skiList: [
        // {
        //   img: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
        //   avatar:
        //     'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        //   username: '行走的Skier1',
        //   title:
        //     'Play poor you~玩！差你热雪上头计划——尚投宣言差你热雪上头计划——尚投宣言',
        // },
        // {
        //   img: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
        //   avatar:
        //     'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        //   username: '孤胆忍者HHH2',
        //   title: '滑雪自由！划算实现！GO! GO! GO!',
        // },
        // {
        //   img: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
        //   avatar:
        //     'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        //   username: '孤胆忍者HHH3',
        //   title: '滑雪自由！划算实现！GO! GO! GO!',
        // },
        // {
        //   img: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
        //   avatar:
        //     'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        //   username: '孤胆忍者HHH4',
        //   title: '滑雪自由！划算实现！GO! GO! GO!',
        // },
      ],
      /* 首页上方雪圈数据*/
      snowCircleData: {},
    }
  },
  onLoad() {
    this.getSnowCircleData()
    this.getList()
  },
  onShow() {},
  mounted() {},
  //监听页面触底函数
  onReachBottom() {
    let _this = this
    let params = [
      {
        img: 'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        avatar:
          'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        username: '行走的Skier1',
        title:
          'Play poor you~玩！差你热雪上头计划——尚投宣言差你热雪上头计划——尚投宣言',
      },
      {
        img: 'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        avatar:
          'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        username: '孤胆忍者HHH2',
        title: '滑雪自由！划算实现！GO! GO! GO!',
      },
      {
        img: 'https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0',
        avatar:
          'https://ts1.cn.mm.bing.net/th/id/R-C.748160bf925a7acb3ba1c9514bbc60db?rik=AYY%2bJ9WcXYIMgw&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50017%2f0822.jpg_wh1200.jpg&ehk=CMVcdZMU6xxsjVjafO70cFcmJvD62suFC1ytk8UuAUk%3d&risl=&pid=ImgRaw&r=0',
        username: '孤胆忍者HHH3',
        title: '滑雪自由！划算实现！GO! GO! GO!',
      },
    ]
    // _this.skiList = _this.skiList.concat(params)
  },
  methods: {
	  onShareAppMessage() {
	  return {
	      title: '爱滑雪-吉林滑雪通',
	      imageUrl: this.img,
	    }
	  },
	  onShareTimeline() {
	    return {
		      title: '爱滑雪-吉林滑雪通',
	      imageUrl: this.img,
	    }
	  },
    // 跳转到新闻
    tabuLationBtn(item) {
      if (item.carouselType === "ski_news") {
        uni.navigateTo({
          url: `/myPackageA/pages/tabuLation/terminal?id=${item.id}`,
        })
      } else {
        uni.navigateTo({
          url: `/myPackageA/pages/tabuLation/activity?id=${item.id}`,
        })
      }
    },
    getList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.getSeeding,
		data:{
			carouselPosition:'HOME_PAGE'
		},
        method: 'GET',
        success(res) {
          console.log('首页轮播图>>>>>>', res)
          _this.swiperList = res.data.data
        },
      })
    },
    // 跳转到一单成页面
    toOrderSuccess() {
      uni.navigateTo({
        url: '/myPackageB/pages/orderSucceed/orderSucceed',
      })
    },
	//攻略跳转雪圈 2023-12-16
	toskiTubing(){
		console.log('s')
		uni.reLaunch({
		  url: '/pages/skiTubing/skiTubing?type=gl',
		})
	},
    // 跳转到一图懂页面
    toMapPage() {
      uni.switchTab({
        url: '/pages/map/map',
      })
    },
    // 跳转方法
    toPage(item) {
      if (item.name === '优惠') {
        uni.navigateTo({
          url: '/myPackageA/pages/tabuLation/index?type=yh',
        })
      }
      if (item.isMainTab) {
        uni.switchTab({
          url: item.toPageUrl,
        })
      } else {
        uni.navigateTo({
          url: item.toPageUrl,
        })
      }
    },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
    // 跳转热榜
    goPopular() {
      uni.navigateTo({
        url: '/myPackageA/pages/popular/index',
      })
    },
    // 获取雪圈信息
    getSnowCircleData() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.getHomeCircle,
        method: 'GET',
        success(res) {
          console.log('首页雪圈>>>>>>', res)
          if (res.data.code === 200) {
            _this.snowCircleData = res.data.data.HOME_PAGE_UP
            _this.skiList = res.data.data.HOME_PAGE_DOWN
			//_this.skiList = res.data.data.isHomepage
          } else {
            _this.snowCircleData = {}
            _this.skiList = []
          }
        },
      })
    },
    /* 回显雪圈图片*/
    getImage(titleImg) {
      if (titleImg && titleImg.includes(';')) {
        let imageList = titleImg.split(';')
        return imageList[0]
      } else {
        return titleImg
      }
    },
    /* 雪圈详情页面跳转*/
    newDetail(id) {
      uni.navigateTo({
        url: `/myPackageA/pages/skiTubingInfo/skiTubingInfo?id=${id}`,
      })
    },
  },
}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #c1e2e7;
}
</style>
<style lang="scss" scoped>
.pageContainer {
  height: 100%;
  min-height: 100vh;
  overflow-y: scroll;
  background-color: #c1e2e7;
}

.indexbg {
  width: 750rpx;
  height: 549rpx;
  position: absolute;
  top: 0;

  image {
    width: 100%;
    height: 100%;
  }
}

.index-conent {
  height: 100%;
  position: absolute;

  .last-content {
    position: absolute;
    width: 750rpx;
    padding: 0 30rpx;

    // 按钮列表
    .link-list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 110rpx;

      .link-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .img-box {
          width: 88rpx;
          height: 88rpx;
          background: linear-gradient(90deg, #f1f96a 0%, #a7ef4e 100%);
          box-shadow: 0rpx 5rpx 0rpx 1rpx rgba(255, 255, 255, 0.57);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          .link-img {
            width: 57rpx;
            height: 57rpx;
          }
        }

        .link-name {
          font-size: 26rpx;
          font-weight: 550;
          color: #303030;
          margin-top: 23rpx;
        }
      }
    }

    // 轮播图
    .swiper-box {
      margin-top: 20rpx;
      width: 100%;

      .uni-swiper-wrapper {
        width: 690rpx;
        height: 340rpx;

        /deep/ .wx-swiper-dot {
          // 指示点元素默认样式
          width: 16rpx !important;
          height: 16rpx !important;
          background: #64787b !important;
          border-radius: 50%;
        }

        /deep/ .wx-swiper-dot-active {
          // 指示点元素激活（当前选中）状态样式
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          width: 63rpx !important;
          height: 16rpx !important;
          background-color: #303030 !important;
        }

        .index-swiper-item {
          border-radius: 20rpx;

          .i-image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    // 雪道图和雪圈
    .skiRoad-skiTubing {
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;

      .skiRoad {
        width: 335rpx;
        height: 434rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }

      .skiTubing {
        width: 335rpx;
        height: 434rpx;
        background-color: #fff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        flex-direction: column;

        .st-top {
          width: 335rpx;
          height: 377rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx 20rpx 0 0;
          }
        }

        .st-bottom {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          color: #464646;
          margin-top: 10rpx;
          padding: 0 15rpx;
          display: -webkit-box;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; //当属性值为3，表示超出3行隐藏
        }
      }
    }

    // 行程单+攻略+直播
    .schedule-strategy-live {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;

      .schedule {
        width: 223rpx;
        height: 110rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }

      .strategy {
        width: 223rpx;
        height: 110rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
        }
      }

      .live {
        width: 223rpx;
        height: 110rpx;

        image {
          width: 100%;
          border-radius: 20rpx;
          height: 100%;
        }
      }
    }

    // 排行榜
    .rank {
      width: 690rpx;
      height: 176rpx;
      margin-top: 20rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 30rpx;
      }
    }

    // 新手等五个菜单按钮
    .other-menu {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;

      .menu-item {
        position: relative;

        .menu-item-img {
          width: 122rpx;
          height: 170rpx;
          border-radius: 20rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 20rpx;
          }
        }

        .menu-item-title {
          font-size: 25rpx;
          font-weight: bold;
          color: #ffffff;
          position: absolute;
          top: 16rpx;
          right: 17rpx;
        }
      }
    }

    // 雪圈内容
    .ski-content {
      width: 100%;
      height: 100%;
      margin-top: 20rpx;

      .pubuItem {
        column-count: 2;
        //column-gap: 20rpx;
break-inside: avoid;
      }

      .item-masonry {
        box-sizing: border-box;
        border-radius: 20rpx;
        overflow: hidden;
        background-color: #fff;
        break-inside: avoid;
        /*避免在元素内部插入分页符*/
        box-sizing: border-box;
        margin-bottom: 20rpx;
        // box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
      }

      .item-masonry image {
        width: 100%;
      }

      .listtitle {
        padding-left: 16rpx;
        font-size: 24rpx;
        padding-bottom: 22rpx;

        .ci-title {
          line-height: 39rpx;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          min-height: 39rpx;
          max-height: 78rpx;
        }

        .ci-user {
          display: flex;
          align-items: center;
          margin-top: 12rpx;

          .user-avatar {
            width: 30rpx;
            height: 30rpx;
            background: #6e6e6e;
            border-radius: 50%;

            image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .user-name {
            font-size: 20rpx;
            font-weight: bold;
            margin-left: 10rpx;
          }
        }
      }
    }

    .white-box {
      width: 100%;
      height: 170rpx;
    }
  }
}
//设置轮播的指示点位置

/* wx-swiper-dots wx-swiper-dots-horizontal */
	wx-swiper .wx-swiper-dot-active{
	  width: 40rpx;
	  border-radius: 10rpx;
	  background: #eb544d;
	}
</style>
